<template>
	<view class="root height-100percent width-100percent oh">
		<camera
			class="relative"
			:style="{
				width: `${cameraSize.width}px`,
				height: `${cameraSize.height}px`,
				transform: `translateX(-${(cameraSize.width - screenSize.screenWidth) / 2}px)`,
			}"
			:device-position="devicePosition"
			@error="error"
		>
			<cover-view
				class="absolute jc-sb"
				:style="{
					top: `${menuButtonBoundingClientRect.top}px`,
					left: `${(cameraSize.width - screenSize.screenWidth) / 2}px`,
					right: `${(cameraSize.width - screenSize.screenWidth) / 2}px`,
					bottom: `${screenSize.screenHeight - screenSize.safeArea.bottom}px`,
				}"
			>
				<cover-view>
					<cover-view
						:style="{
							paddingRight: `calc(100vw - ${menuButtonBoundingClientRect.left}px)`,
							height: `${menuButtonBoundingClientRect.height}px`,
						}"
						class="fd-row jc-sb ai-center"
					>
						<cover-image
							class="width-36 height-36 ml-30"
							src="/static/icon-close.png"
							@click="operation('close')"
						/>
						<cover-image
							class="width-36 height-36 mr-30"
							src="/static/icon-switchCamera.png"
							@click="operation('camera')"
						/>
					</cover-view>

					<cover-view class="text-center color-fff fs-32 mt-20">
						<cover-view class="lh-50">摘下眼镜</cover-view>
						<cover-view class="lh-50">露出耳朵和额头</cover-view>
						<cover-view class="lh-50">正脸拍照，长发扎起</cover-view>
					</cover-view>
				</cover-view>

				<cover-image
					class="as-center mt-30"
					:style="{ width: `650rpx`, height: `680rpx` }"
					src="/static/bg-head.png"
				/>

				<cover-image
					class="as-center"
					:style="{
						width: `120rpx`,
						height: `120rpx`,
						marginBottom: `20px`,
					}"
					@click="operation('shot')"
					src="/static/icon-shot.png"
				/>
			</cover-view>
		</camera>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Storage } from "@/libs/utils";

	@Component
	export default class Camera extends Vue {
		// component property
		devicePosition: string = "front";
		menuButtonBoundingClientRect: UniApp.GetMenuButtonBoundingClientRectRes = uni.getMenuButtonBoundingClientRect();

		screenSize: AnyObject = uni.getSystemInfoSync();

		get cameraSize(): AnyObject {
			const { screenWidth, screenHeight } = this.screenSize;
			return {
				width: (screenHeight / (screenHeight * 0.7)) * screenWidth,
				height: screenHeight,
			};
		}

		operation(action: string) {
			switch (action) {
				case "close":
					uni.navigateBack({});
					break;
				case "camera":
					this.devicePosition = this.devicePosition === "front" ? "back" : "front";
					break;
				case "shot":
					uni.showToast({ title: "Loading...", icon: "loading" });
					const ctx = uni.createCameraContext();
					ctx.takePhoto({
						quality: "high",
						success: ({ tempImagePath }) => {
							uni.uploadFile({
								url: this.$config.API_URL + "&r=util.uploader.get_face_xy",
								filePath: tempImagePath,
								name: "file",
								header: {
									Authorization: Storage.get("authorization"),
								},
								success: () => uni.navigateTo({ url: "/pages/TryOn" }),
								complete: uni.hideToast,
							});
						},
						fail: uni.hideToast,
					});
					break;
				default:
					break;
			}
		}
		error(e: any) {
			console.log(e.detail);
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	// scss
</style>